<template>
  <van-row class="searchfor">
    <van-col span="3" @click="$router.go(-1)">
      <span class="iconfont" style="font-size: 0.5rem; margin-right: 0.05rem">&#xe65e;</span>
    </van-col>
    <van-col span="21">
      <van-search placeholder="请输入搜索关键词" v-model="state.searchvalue" @search="onSearch" />
    </van-col>
  </van-row>

  <van-row class="searchfor-history">
    <van-col span="3">
      <span class="searchfor-left">历史:</span>
    </van-col>
    <van-col span="18" class="searchfor-center">
      <span
        v-for="(item, index) in state.searchrecords"
        :key="item"
        class="searchfor-span"
        @click="historysearch(index)">
        {{ item }}</span
      >
    </van-col>
    <van-col span="3" @click="deleterecord">
      <van-icon name="delete-o" size="0.4rem" />
    </van-col>
  </van-row>
  <div class="searchfor-bottom">
    <div v-for="(song, index) in state.searchdata" :key="song" :title="song" class="itemmusiclist-bottom">
      <van-row>
        <van-col span="3" class="itemmusiclist-bottom-index" @click="songdata(index)">
          {{ index + 1 }}
        </van-col>
        <van-col span="15" @click="songdata(index)">
          <div class="itemmusiclist-bottom-song">{{ song.name }}</div>
          <div class="itemmusiclist-bottom-name">
            <span v-for="arname in song.ar" :key="arname">
              {{ arname.name + "、" }}
            </span>
          </div>
        </van-col>
        <van-col span="3">
          <div v-if="song.mv != 0" class="iconfont" style="font-size: 0.6rem">&#xe679;</div>
        </van-col>
        <van-col span="3">
          <div class="iconfont" style="font-size: 0.6rem">&#xe65f;</div>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import { useStore } from "../stores/index";
import { getsearch } from "../api/user";

export default {
  setup() {
    const store = useStore();
    const state = reactive({
      searchvalue: "",
      searchrecords: [],
      searchdata: [],
    });
    onMounted(() => {
      state.searchrecords = JSON.parse(localStorage.getItem("searchrecords")) || [];
      //store.switchsongsheet(state.searchdata);
    });
    const onSearch = () => {
      //console.log(state.searchvalue);
      state.searchrecords.unshift(state.searchvalue);
      getsearch(state.searchvalue).then((res) => {
        state.searchdata = res.data.result.songs;
        // console.log(res.data.result.songs, "1");
        // console.log(state.searchdata, "2");
      });
      state.searchvalue = "";
      //console.log(state.searchrecords, "1");
      state.searchrecords = Array.from(new Set(state.searchrecords));
      //console.log(state.searchrecords, "2");
      if (state.searchrecords.length > 10) {
        state.searchrecords.splice(10, state.searchrecords.length - 10);
      }
      localStorage.setItem("searchrecords", JSON.stringify(state.searchrecords));
    };
    const deleterecord = () => {
      state.searchrecords = [];
      localStorage.setItem("searchrecords", JSON.stringify(state.searchrecords));
    };
    function songdata(index) {
      store.getsongdata({
        songsheets: state.searchdata,
        id: state.searchdata[index].id,
        name: state.searchdata[index].name,
        songsindex: index,
      });
    }
    function historysearch(index) {
      getsearch(state.searchrecords[index]).then((res) => {
        state.searchdata = res.data.result.songs;
      });
    }

    return { store, state, onSearch, deleterecord, songdata, historysearch };
  },
};
</script>

<style lang="less" scoped>
.searchfor {
  height: 0.8rem;
}
.van-search {
  margin: 0;
  /* padding: 0; */
}

.searchfor-history {
  height: 1rem;
  text-align: center;
  .searchfor-left {
    font-weight: bold;
  }
  .searchfor-center {
    text-align: left;
    //overflow: auto;
    .searchfor-span {
      font-size: 0.2rem;
      margin: 0 0.15rem;
      padding: 0 0.1rem;
      background-color: gainsboro;
      border-radius: 0.5rem;
      display: inline-block;
    }
  }
  //   .searchfor-right {
  //     width: 0.5rem;
  //     height: 0.5rem;
  //   }
}

.searchfor-bottom {
  height: 10.5rem;
  overflow: auto;
}

.itemmusiclist-bottom {
  text-align: center;
  height: 1rem;
  overflow: hidden;
  padding: 0.1rem 0;
  // margin-bottom: 1rem;

  .itemmusiclist-bottom-index {
    line-height: 1rem;
    font-size: 0.4rem;
  }

  .itemmusiclist-bottom-song {
    font-size: 0.3rem;
    font-weight: bold;
    text-align: left;
    margin: 0.1rem 0;
    white-space: nowrap;
    overflow: hidden;
  }

  .itemmusiclist-bottom-name {
    font-size: 0.05rem;
    height: 0.4rem;
    text-align: left;
    overflow: hidden;
    margin: 0.1rem 0;
    white-space: nowrap;
  }
}

// .van-list__finished-text {
//   height: 0.5rem;
// }

// .itemmusiclist-list {
//   height: 5rem;
//   overflow: auto;
// }
</style>
